<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper">
            <view class="u-line-1 text">住院人</view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 2rpx"></u-line>
            <view class="u-line-1 text-two">住院号</view>
            <view class="u-line-1 text-three" v-if="!!self.thePatient">{{self.thePatient.name}}</view>
            <view class="u-line-1 text-four" v-if="!!self.thePatient">{{self.thePatient.hospitalNumber}}</view>
			
			<view class="flex-col wraper-col-two1" style="position: absolute; right: 10px;"  @click="cutPat">
			    <u-icon class="icon-list" name="list"></u-icon>
			    <view class="u-line-1 text-four1">切换住院人</view>
			</view>
        </view>
        <view class="wrapper-two">
            <view class="u-line-1 text-five">住院余额</view>
            <view class="u-line-1 text-six"></view>
            <view class="u-line-1 text-seven" v-if="!!self.patientCard">￥{{self.patientCard.balance}}</view>
        </view>
        <view class="flex-row wrapper-three">
            <view class="wraper-col">
                <view class="u-line-1 text-eight">近一年</view>
            </view>
            <view class="wraper-col-two">
				<uni-datetime-picker type="daterange" v-model="single">
					<view class="u-line-1 text-nine" @click="cutDate">选择时间</view>
				</uni-datetime-picker>
            </view>
        </view>
        <view @click="billDetails(record.id)" class="flex-col wrapper-four" v-for="record in record">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-ten">住院预交金</view>
                <view class="u-line-1 text-eleven">+{{record.price}}</view>
            </view>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text-twelve">{{record.createTime}}</view>
                <view class="u-line-1 text-thirteen" v-if="!!record.patientCard">余额{{record.patientCard.balance}}</view>
            </view>
        </view>
		<!-- 切换住院人弹出框 -->
		<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate">
			<view class="popopBox">
				<scroll-view
					scroll-y="true"
					style="height: 50rpx;"
					scroll-with-animation="true"
				>
				</scroll-view>
				<view @click="cutPatient(hospital.id)" class="flex-row wrapper" v-for="hospital in hospital">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view class="u-line-1 text" v-if="!!hospital.thePatient">{{hospital.thePatient.name}}</view>
							<view class="flex-row box-col">
								<view class="u-line-1 text-two" v-if="!!hospital.thePatient">{{hospital.thePatient.hospitalNumber}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{hospital.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
    </view>
</template>
<script>
    export default {
        data() {
            return {
				isCut:false,
				URL: 'http://localhost:9000/', //主域名
				single:'',
				hospital:[],
				self:'',
				record:[]
			}
        },
		watch:{
			single (newLength, oldLength) {
				this.single = newLength
			    console.log(newLength[0])
			    console.log(newLength[1])
				var begin = newLength[0]//获取开始时间
				var end = newLength[1]//获取结束时间
				
				this.patientRecordById(this.self.thePatient.id , begin , end)
			}
		},
        methods: {
			
			//充值详情
			billDetails(id){
				console.log(id)
				uni.navigateTo({
					url:'billDetails?payId='+0+'&brId='+id
				})
			},
			
			//查询充值记录
			patientRecordById(id , begin , end){
				console.log(id)
				uni.request({
					url:this.URL+"record/record/drug-record/patientRecordById/"+id + "/"+ begin + "/" + end,
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.code == 20000){
							this.record = res.data.data.record
						}
						console.log("this.record" , this.record)
					}
				})
			},
			
			//查询住院人
			hospitalized(id){
				uni.request({
					url:this.URL+"user/user/inpatient/inpatientUserId/"+id,
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.code == 20000){
							this.hospital = res.data.data.inpatients
							this.self = this.hospital[0]
							this.patientRecordById(this.self.thePatient.id)
							console.log("this.self" , this.self)
							console.log("this.self.id" , this.self.thePatient.id)
							console.log(this.hospital)
						}
					}
				})
			},
			
			//关闭日期
			close(){
				this.isDate = false
			},
			
			//切换日期
			cutDate(){
				this.isDate = !this.isDate
			},
			
			//切换就诊人
			cutPat(){
				this.isCut = !this.isCut
			},
			
			//切换住院人
			cutPatient(id){
				console.log(id)
				for (var i = 0; i < this.hospital.length; i++) {
					if(id == this.hospital[i].id){
						this.self = this.hospital[i]
					}
				}
				this.isCut = false
				console.log(this.self)
				this.patientRecordById(this.self.thePatient.id)
			},

        },
		onLoad(id) {
			this.hospitalized(id.id)
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
	.wraper-col-two1 {
	    width: 148rpx;
	    padding: 28rpx 0rpx 16rpx 6rpx;
	
	    .icon-list {
	        width: 28rpx;
	        margin: 0rpx 0rpx 14rpx 54rpx;
	    }
	
	    .text-four1 {
	        width: 100%;
	    }
	}

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        height: 1334rpx;
        padding: 40rpx 31rpx 0rpx 31rpx;

        .wrapper {
            width: 100%;
            margin-bottom: 30rpx;
            padding: 30rpx 0rpx 27rpx 20rpx;
            background: #ffffff;

            .text {
                width: 148rpx;
                margin-bottom: 26rpx;
                letter-spacing: 10rpx;
                font-size: 32rpx;
                color: #aaaaaa;
            }

            .line {
                width: 644rpx;
            }

            .text-two {
                width: 148rpx;
                margin-left: 2rpx;
                letter-spacing: 10rpx;
                font-size: 32rpx;
                color: #aaaaaa;
            }

            .text-three {
                width: 544rpx;
                top: 30rpx;
                right: -6rpx;
                font-size: 32rpx;
                position: absolute;
            }

            .text-four {
                width: 544rpx;
                bottom: 26rpx;
                right: -6rpx;
                font-size: 32rpx;
                position: absolute;
            }
        }

        .wrapper-two {
            width: 100%;
            margin-bottom: 38rpx;
            padding: 30rpx 0rpx 32rpx 20rpx;
            background: #ffffff;

            .text-five {
                width: 188rpx;
                font-size: 32rpx;
                color: #221310;
            }

            .text-six {
                bottom: -8rpx;
                left: -30rpx;
                position: absolute;
            }

            .text-seven {
                width: 216rpx;
                top: 30rpx;
                right: -6rpx;
                font-size: 32rpx;
                position: absolute;
            }
        }

        .wrapper-three {
            width: 300rpx;
            justify-content: space-between;
            margin-bottom: 30rpx;

            .wraper-col {
                width: 122rpx;
                height: 44rpx;
                padding-left: 17rpx;
                border-radius: 40rpx;
                background: #006eff;

                .text-eight {
                    width: 96rpx;
                    color: #fdfeff;
                }
            }

            .wraper-col-two {
                width: 154rpx;
                padding: 2rpx 0rpx 0rpx 23rpx;
                border-radius: 40rpx;
                background: #e4f0ff;

                .text-nine {
                    width: 116rpx;
                    color: #006eff;
                }
            }
        }

        .wrapper-four {
            width: 100%;
            padding: 30rpx 0rpx 6rpx 20rpx;
            border-top-width: 2rpx;
            border-top-style: solid;
            border-bottom-width: 2rpx;
            border-bottom-style: solid;
            background: #ffffff;

            .wraper-row {
                width: 666rpx;
                justify-content: space-between;
                margin-bottom: 24rpx;

                .text-ten {
                    width: 188rpx;
                    font-size: 32rpx;
                    color: #221310;
                }

                .text-eleven {
                    width: 188rpx;
                    font-size: 32rpx;
                    color: #f79e22;
                }
            }

            .wraper-row-two {
                width: 668rpx;
                justify-content: space-between;

                .text-twelve {
                    width: 272rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }

                .text-thirteen {
                    width: 202rpx;
                    font-size: 2rpx;
                    color: #aaaaaa;
                }
            }
        }
    }
</style>